<template>
  <div class="snoke">
      <div class="header">
          <span class="name">贪吃蛇~~~</span>
          <el-button @click='begin' v-if="on" type="primary" size="mini">开始游戏</el-button>
          <el-button @click="end" plain v-else type="warn" size="mini">结束游戏</el-button>
          <span class="text"><span class="fen">{{fen}} </span> 分</span>
      </div>
      <canvas ref="can" width=400 height=400 id='can'></canvas>
      <div>
          
      </div>
  </div>
</template>

<script>
import { getCurrentInstance, onMounted ,ref} from 'vue'
export default {
   setup(){
       let {ctx}=getCurrentInstance()
    var can=null
    var ct=null
    onMounted(()=>{
        can=ctx.$refs.can
        ct=can.getContext('2d')
        start()
    })
    let snokeArr=[]  //蛇
    let direct={   //运动方向
        x:-1,
        y:0
    }
    let foo={     //实物的位置
        x:0,
        y:0,
        color:'#fff'
    }
    let speed=1000  //速度
    var timer=null   //计时器
    let fen=ref(0)
    function restart(){
        snokeArr=[]
        for(let i=1;i<4;i++){
        let sn={
            x:10+i,
            y:5
        }
        snokeArr.push(sn)
    }
    }
    restart()
    
   function start(){
      ct.save()
      ct.strokeStyle='green'
      ct.lineWidth=1
      for(let item of snokeArr){
          ct.strokeRect(item.x*19,item.y*19,20,20)
      }
      ct.fillStyle='red'
      ct.fillRect(snokeArr[0].x*19,snokeArr[0].y*19,20,20)
      ct.restore()
   }

   function food(){
       ct.beginPath()
       ct.fillStyle=foo.color
       ct.arc(foo.x*19+5,foo.y*19+5,5,0,360)
       ct.fill()
       ct.closePath()
   }
   function getFoo(){
       getPos()
       getColor()
   }
   function getPos(){
       let x=Math.floor(Math.random()*20)  
       let y=Math.floor(Math.random()*20)  
       foo.x=x
       foo.y=y
   }
   function getColor(){
            let r=Math.round(Math.random()*255) 
            let g=Math.round(Math.random()*255) 
            let b=Math.round(Math.random()*255)
            let opstily=Math.random()
            let color=`rgb(${r},${g},${b},${opstily})`
            foo.color=color
        }
   function move(){
        timer=setInterval(()=>{
          ct.clearRect(0,0,can.width,can.height)
          food()
          let tem=JSON.parse(JSON.stringify(snokeArr[0])) 

          switch(tem.x){
              case 21:
                  tem.x=0;break;
              case -1:
                  tem.x=20;break;
              default:
                  tem.x+=direct.x;break
          }
          switch(tem.y){
              case 21:
                  tem.y=0;break;
              case -1:
                  tem.y=20;break;
              default:
                  tem.y+=direct.y;break
          }
          //吃到实物
          if(tem.x===foo.x&&tem.y===foo.y){
              snokeArr.push(snokeArr[snokeArr.length-1])
              getFoo()
              fen.value++
          }
          snokeArr.unshift(tem)
          snokeArr.pop()
          start()
       },speed)
   }
   let on =ref(true)
   function begin(){
       on.value=false
      move()
      getFoo()
      food()
      document.body.onkeydown=function(e){
          if(e.keyCode===38&&direct.y!==1){
              direct={
                  x:0,
                  y:-1
              }
          }else if(e.keyCode===40&&direct.y!==-1){
              direct={
                  x:0,
                  y:1
              }
          }else if(e.keyCode===37&&direct.x!==1){
              direct={
                  x:-1,
                  y:0
              }
          }else if(e.keyCode===39&&direct.x!==-1){
              direct={
                  x:1,
                  y:0
              }
          }
      }

   }
   function end(){
       on.value=true
       document.body.onkeydown=null
       clearInterval(timer)
       ct.clearRect(0,0,can.width,can.height)
       restart()
       start()
       fen.value=0
   }
   return {
       begin,end,on,fen
   }
   }
}
</script>

<style lang='less' scoped>
.snoke{
    width: 400px;
    height: 400px;
    border: 1px solid #000;
    #can{
        background: #000;
    }
    .header{
        width: 100%;
        height: 25px;
        line-height: 25px;
        background-color: rgb(47, 218, 132);
        .text{
            float: right;
            .fen{
                color:aqua;
                font-size:20px;
            }
        }
    }
}
</style>